import { AfterViewInit, Component, ElementRef, HostBinding, OnDestroy, Renderer2 } from '@angular/core';
import { SignRenderer } from '@shared/core/renderer/sign';
import { MessageService } from '@shared/services/message.service';

@Component({
  selector: 'app-sign-three',
  template: `<ng-content></ng-content>`,
  styles: [`
    ::ng-deep .element {
        width: 100px;
        height: 100px;
        box-shadow: inset 0 0 20px #5ed7ff75;
        border: 3px solid rgba(107,210,245,.46);
        border-radius: 20px;
        text-align: center;
        cursor: default
    }

    ::ng-deep .element img {
        border-radius: 20px;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }
  `]
})
export class SignThreeComponent implements AfterViewInit, OnDestroy {
  private signRenderer = new SignRenderer()

  constructor(
    private rd: Renderer2,
    private elementRef: ElementRef,
    private messageService: MessageService,
  ) {
    this.messageService.On('windowResize', () => {
      this.signRenderer.onWindowResize();
    })
  }

  @HostBinding('style.display') display = 'block';
  @HostBinding('style.width.px') width = 1920;
  @HostBinding('style.height.px') height = 1080;


  ngAfterViewInit() {
    this.initScence();
  }

  initScence() {
    const renderer = this.signRenderer.init(this.elementRef)
    this.rd.appendChild(this.elementRef.nativeElement, renderer.domElement)
    this.signRenderer.init3D()
  }

  ngOnDestroy(): void {
    this.signRenderer.clear()
  }

}

